<template>
  <div class="app-container">
    <px-scrollbar class="dataAnalysis">
      <div class="content">
        <div class="searchBox">
          <px-button style="margin-right: 24px" type="primary" :icon="ArrowLeft" @click="cancel">返回</px-button>
          <p style="width: 440px">
            <px-date-picker
              v-model="dateRange"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              :default-time="defaultTime"
            />
          </p>

          <px-button style="margin-left: 24px" type="primary" :disabled="thermalflg" @click="getthermalMapuuid">查询</px-button>
          <!-- <px-button style="margin-left: 24px" type="primary" plain @click="reset">重置</px-button> -->
        </div>
        <div class="contentBox">
          <px-row class="contentBoxrow">
            <px-col :span="14">
              <div class="hotEcharts">
                <modelTitle :title="'相关度分析'" />
                <div v-loading="thermalflg" style="width: 100%; height: 100%" element-loading-text="相关度分析生成中...">
                  <div v-show="thermalMapData.xaxis.length > 0" id="hotChartContainer" style="width: 900px; height: 650px" />
                  <px-empty v-show="thermalMapData.xaxis.length == 0">
                    <!-- <px-button :disabled="thermalflg" type="primary" @click="getthermalMapuuid">热力图分析</px-button> -->
                  </px-empty>
                </div>
              </div>
            </px-col>
            <px-col style="padding: 45px 16px" :span="10">
              <px-select
                v-model="firstCode"
                placeholder="请选择"
                style=" position: absolute; top: 10px; right: 38px;float: right; width: 200px"
                filterable
                @change="firstchange"
              >
                <px-option v-for="dict in thermalMap" :key="dict.indicatorPath" :label="dict.indicatorName" :value="dict.indicatorPath" />
              </px-select>
              <px-table v-loading="loading" :data="thermalMapData.correlationList" height="400" class="listtable" show-overflow-tooltip border>
                <px-table-column label="序号" type="index" width="80" />
                <px-table-column label="指标名称" prop="indicatorName">
                  <template #default="scope">
                    <span>{{ scope.row.name }}</span>
                  </template>
                </px-table-column>
                <px-table-column label="相关度" prop="maxValue">
                  <template #default="scope">
                    <span>{{ scope.row.result }}</span>
                  </template>
                </px-table-column>
              </px-table>
            </px-col>
          </px-row>

          <px-row class="contentBoxrow">
            <px-col :span="14">
              <div class="metricEcharts">
                <modelTitle :title="'指标分析'" />
                <div style="height: 100%">
                  <div class="metricSelect">
                    <px-select
                      v-model="selectedList"
                      multiple
                      placeholder="相关指标"
                      style="width: 480px; margin-right: 24px"
                      collapse-tags
                      collapse-tags-tooltip
                      :max-collapse-tags="2"
                      filterable
                      clearable
                    >
                      <px-option v-for="(item, index) in spcList" :key="index" :label="item.indicatorName" :value="item.point" />
                    </px-select>
                    <px-select v-model="forecast" placeholder="请选择" style="width: 80px; margin-right: 16px" filterable @change="timechange">
                      <px-option v-for="dict in forecastList" :key="dict.itemValue" :label="dict.itemName" :value="dict.itemValue" />
                    </px-select>
                    <px-button type="primary" @click="analysisHandler">分析</px-button>
                  </div>
                  <div class="metricContent">
                    <div class="metricContentBox">
                      <div class="metricChart">
                        <echartsDom
                          v-if="SpcAnalysis.length > 0 && SpcAnalysis[0].pointValues != null"
                          style="float: left; width: 100%"
                          :width="'100%'"
                          :height="'400px'"
                          :option="option"
                        />
                        <div v-else>
                          <px-empty :image-size="100" />
                        </div>
                      </div>
                      <div class="metricCheck">
                        <div style="margin-top: 12px">
                          <span>关注指标</span>
                          <px-checkbox-group v-model="checkedMetric" class="checkbox">
                            <px-checkbox v-for="item in relateMetric" :key="item" :label="item.indicatorPath">
                              <px-tooltip :content="item.indicatorName" placement="top-end">
                                {{ item.indicatorName }}
                              </px-tooltip>
                            </px-checkbox>
                          </px-checkbox-group>
                        </div>
                        <div style="margin-top: 12px">
                          <span>影响指标</span>
                          <px-checkbox-group v-model="checkedImpactMetric" class="checkbox">
                            <px-checkbox v-for="item in influenceMetric" :key="item" :label="item.indicatorPath">
                              <px-tooltip :content="item.indicatorName" placement="top-start">
                                {{ item.indicatorName }}
                              </px-tooltip>
                            </px-checkbox>
                          </px-checkbox-group>
                        </div>
                      </div>
                    </div>
                    <!-- <px-table v-loading="loading" :data="SpcAnalysis.spcList" height="188" class="listtable" show-overflow-tooltip border>
                      <px-table-column label="序号" type="index" width="80" />
                      <px-table-column label="指标名称" prop="indicatorName">
                        <template #default="scope">
                          <span>{{ scope.row.indicatorName ? scope.row.indicatorName : scope.row.pointName }}</span>
                        </template>
                      </px-table-column>
                      <px-table-column label="最大值" prop="maxValue">
                        <template #default="scope">
                          <span>{{ scope.row.maxValue }}</span>
                        </template>
                      </px-table-column>
                      <px-table-column label="最小值" prop="minValue">
                        <template #default="scope">
                          <span>{{ scope.row.minValue }}</span>
                        </template>
                      </px-table-column>
                      <px-table-column label="平均值" prop="avgValue">
                        <template #default="scope">
                          <span>{{ scope.row.avgValue }}</span>
                        </template>
                      </px-table-column>
                    </px-table> -->
                  </div>
                </div>
              </div>
            </px-col>

            <px-col style="padding: 45px 16px" :span="10">
              <px-table v-loading="loading" :data="SpcAnalysis" height="400" class="listtable" show-overflow-tooltip border>
                <px-table-column label="序号" type="index" width="80" />
                <px-table-column label="指标名称" prop="indicatorName">
                  <template #default="scope">
                    <span>{{ scope.row.indicatorName ? scope.row.indicatorName : scope.row.pointName }}</span>
                  </template>
                </px-table-column>
                <px-table-column label="最大值" prop="maxValue">
                  <template #default="scope">
                    <span>{{ scope.row.maxValue }}</span>
                  </template>
                </px-table-column>
                <px-table-column label="最小值" prop="minValue">
                  <template #default="scope">
                    <span>{{ scope.row.minValue }}</span>
                  </template>
                </px-table-column>
                <px-table-column label="平均值" prop="avgValue">
                  <template #default="scope">
                    <span>{{ scope.row.avgValue }}</span>
                  </template>
                </px-table-column>
              </px-table>
            </px-col>
          </px-row>
          <px-row class="contentBoxrow">
            <px-col :span="24">
              <div class="hotEcharts">
                <px-select
                  v-model="threeCode"
                  placeholder="请选择"
                  style="position: absolute; right: 0; width: 200px; margin-bottom: 16px"
                  filterable
                  @change="threechange"
                >
                  <px-option v-for="dict in thermalMap" :key="dict.indicatorPath" :label="dict.indicatorName" :value="dict.indicatorPath" />
                </px-select>
                <modelTitle :title="'散点图'" />
                <px-row style="margin-top: 16px">
                  <px-col v-for="(item, index) in ScatterPlotList" :key="index" :span="6">
                    <div style="width: 100%; height: 400px">
                      <scatterDias :chartlist="item" :width="'100%'" :height="'400px'" />
                    </div>
                  </px-col>
                </px-row>
              </div>
            </px-col>
          </px-row>
        </div>
      </div>
    </px-scrollbar>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, toRefs, reactive, computed } from "vue";
import { ArrowLeft } from "@px-ui/icons-vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import {
  addIndicatorConfig,
  deleteIndicatorConfig,
  queryIndicatorConfigList,
  queryIndicatorMatrix,
  queryMeasureList,
  spcqueryList,
  spcquerySpcAnalysis,
  updateIndicatorConfig,
  algorithmcorrelationFactor,
  algorithmcacheRedis,
  queryalgorithmMatrixByPathAndSystemCode,
  algorithmqueryWaterFuture,
  algorithmSpecialScatterPlot,
  algorithmcorrelationFactorWater,
  algorithmcacheRedisWater,
  algorithmqueryWaterFutureNew
} from "@/api/spc";
import echartsDom from "../../spc/components/echartsDom.vue";
import * as echarts from "echarts";
import relateEchartsDom from "../components/echartsDom.vue";
import scatterDias from "./scatterDias.vue";
import { PxMessage, PxMessageBox } from "px-ui";

const props = defineProps({
  centerIndicator: {
    type: String,
    default: ""
  }
});
const isDataAnalysis = ref(false);
const dateRange = ref([]);
const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 1), new Date(2000, 1, 1, 23, 59, 59)];
const spcList = ref([]);
const selectedList = ref([]);
const loading = ref(false);
const SpcAnalysis = ref([]);
const option = ref([]);
const yAxis = ref([]);
const chartsList = ref([]);
const series = ref([]);
let chartInstance = null;
const checkedMetric = ref([]);
const checkedImpactMetric = ref([]);
const thermalflg = ref(false);
const relationConfig = ref(false);
const relatedList = [
  {
    className: "WATER",
    labelName: "水科关联指标"
  },
  {
    className: "WATER",
    labelName: "水科关联指标"
  },
  {
    className: "WATER",
    labelName: "水科关联指标"
  },
  {
    className: "WATER",
    labelName: "水科关联指标"
  },
  {
    className: "WATER",
    labelName: "水科关联指标"
  }
];

const state = reactive<Record<string, any>>({
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  indicatorLoaded: false, // 判断指标是否已经查询
  tableData: [], // 列表数据
  total: 0, // 列表数量
  centerIndicatorList: [], // 中心指标
  machineIndicatorList: [], //机械科指标
  electricityIndicatorList: [], //电科指标
  gasIndicatorList: [], //气化科指标
  waterIndicatorList: [], //水科指标
  fabIndicatorList: [], //机台侧指标
  rowData: {}, // 当前行数据
  dialogVisible: false, // 弹窗显示隐藏
  dialogType: "add", // 弹窗默认新增
  editFormParams: {},
  indicatorTypeList: [
    {
      value: "0",
      name: "关注指标"
    },
    {
      value: "1",
      name: "影响指标"
    }
  ],
  formRef: null,
  forecastList: [
    { itemName: "开", itemValue: true },
    { itemName: "关", itemValue: false }
  ]
});
const chartOptions = ref(null);

const {
  forecastList,
  queryParams,
  indicatorLoaded,
  tableData,
  total,
  centerIndicatorList,
  machineIndicatorList,
  electricityIndicatorList,
  gasIndicatorList,
  waterIndicatorList,
  fabIndicatorList,
  editFormParams,
  rowData,
  dialogVisible,
  dialogType,
  indicatorTypeList,
  formRef
} = toRefs(state);
const WaterFuture = ref([]);
const forecast = ref(false);
const fillNullsWithPrevious = data => {
  let previousNonNull = null;
  return data.map(item => {
    if (item == null) {
      return previousNonNull;
    } else {
      previousNonNull = item;
      return item;
    }
  });
};
const xaxis = ref([]);
watch(
  () => SpcAnalysis.value,
  newOption => {
    if (newOption.length > 0) {
      if (newOption[0].pointValues != null) {
        let chartsvalue = newOption.filter(item => (item.jobId === selectedList.value[0] ? selectedList.value[0] : centerIndicator2.value));
        chartsList.value = chartsvalue[0].pointValues;
        yAxis.value = newOption.map((item, index) => {
          if (item.pointValues != "[]") {
            if (index == 0) {
              return {
                type: "value",
                name: item.indicatorName,
                nameLocation: "middle", //居中
                nameGap: 70, //轴线距离
                nameRotate: 90, //字体选择角度
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: "solid"
                  }
                }
              };
            } else if (index == 1) {
              return {
                type: "value",
                name: item.indicatorName,
                nameLocation: "middle", //居中
                nameGap: 70, //轴线距离
                nameRotate: 90, //字体选择角度
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: "solid"
                  }
                },
                min: item.startValue,
                max: item.endValue ? item.endValue : item.uslValue
              };
            } else {
              return {
                type: "value",
                name: item.indicatorName,
                position: "right",
                offset: 90 * (index - 1),
                nameLocation: "middle", //居中
                nameGap: 70, //轴线距离
                nameRotate: 90, //字体选择角度
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: "solid"
                  }
                },
                min: item.startValue,
                max: item.endValue ? item.endValue : item.uslValue
              };
            }
          }
        });
        series.value = newOption.map((item, index) => {
          // console.log(actYAxis.value.filter(items => items.name == item.jobId)[0].value);
          if (index > 0) {
            return {
              // data: fillNullsWithPrevious(item.pointValues.map(item => item.value)),
              data: actYAxis.value.filter(items => items.name == item.jobId)[0].value,
              type: "line",
              name: item.indicatorName != null ? item.indicatorName : item.pointName,
              yAxisIndex: index
            };
          } else {
            return {
              // data: fillNullsWithPrevious(item.pointValues.map(item => item.value)),
              data: actYAxis.value.filter(items => items.name == item.jobId)[0].value,
              type: "line",
              name: item.indicatorName != null ? item.indicatorName : item.pointName
            };
          }
        });
        if (forecast.value) {
          if (aiYAxis.value != null) {
            console.log(aiYAxis.value[0].value);
            series.value.push({
              data: aiYAxis.value[0].value,
              type: "line",
              name: "预测值"
            });
          }
        }
        setdata();
      }
    } else {
      chartsList.value = [];
    }
  }
);

function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const h = date.getHours().toString().padStart(2, "0");
  const m = date.getMinutes().toString().padStart(2, "0");
  const s = date.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day} ${h}:${m}:${s}`;
}
function formatDate2(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const h = date.getHours().toString().padStart(2, "0");
  const m = date.getMinutes().toString().padStart(2, "0");
  const s = date.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day} ${h}:${m}:${s}`;
}
onMounted(() => {
  // queryIndicatorList();
  const end = new Date();
  end.setHours(23, 59, 59, 0);
  end.setTime(end.getTime());
  const start = new Date();
  // start.setHours(0, 0, 0, 0);
  start.setTime(start.getTime() - 1000 * 3600 * 24 * 3);
  dateRange.value = [formatDate(start), formatDate(end)];
  spcqueryList({
    indicatorName: "",
    classCode: "WATER",
    systemCode: [],
    indicatorLevel: "",
    startTime: dateRange.value[0],
    endTime: dateRange.value[1],
    point: "",
    querySpcCount: false,
    pageNum: 1,
    pageSize: 9999
  }).then(res => {
    spcList.value = res.data;
  });
});

const relateMetric = ref([]);
const influenceMetric = ref([]);
const thermalMap = ref([]);
const thermalMapData = ref({
  xaxis: [],
  yaxis: [],
  xyData: [],
  correlationList: []
});
const thermalMapuuid = ref("");
// 获取指标矩阵图表
const queryMatrix = () => {
  queryIndicatorMatrix({ classType: 1 }).then(res => {
    let nodes = [];
    res.nodeDtos.forEach(v => {
      let symbolSize = 20;
      if (v.category == 0) {
        symbolSize = 30;
      }
      nodes.push({
        ...v,
        name: v.indicatorName,
        symbolSize
      });
    });
    res.nodeDtos.forEach(function (node) {
      node.label = {
        show: node.value > 30
      };
    });

    chartOptions.value = {
      title: {
        text: "指标影响矩阵关系图"
      },
      tooltip: {},
      legend: [
        {
          // selectedMode: 'single',
          data: res.graphDtos.map(function (a) {
            return a.name;
          })
        }
      ],
      series: [
        {
          type: "graph",
          layout: "force", // 使用力导向布局
          data: nodes,
          links: res.linkDtos,
          categories: res.graphDtos,
          legendHoverLink: false,
          force: {
            // 力导向布局的配置项，可以调整以改变布局效果
            repulsion: 200, // 节点之间的斥力
            edgeLength: [50, 100] // 边的长度范围
          },
          roam: true,
          label: {
            position: "right",
            formatter: "{b}"
          },
          scaleLimit: {
            min: 0.4,
            max: 2
          },

          lineStyle: {
            color: "source",
            curveness: 0.3
          },
          emphasis: {
            focus: "adjacency",
            lineStyle: {
              width: 10
            }
          }
        }
      ]
    };

    relateMetric.value = res.nodeDtos.filter(item => item.category === 1);
    influenceMetric.value = res.nodeDtos.filter(item => item.category === 2);
  });
};

const centerIndicator2 = ref("");

const handelResize = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};
//获取热力图uuid
const getthermalMapuuid = () => {
  thermalflg.value = true;
  if (thermalMap.value.length > 0) {
    let parmas = {
      tagNameList: thermalMap.value.map(item => item.indicatorPath),
      startTime: dateRange.value[0],
      endTime: dateRange.value[1]
    };
    // algorithmcorrelationFactor(parmas)
    //   .then(res => {
    //     console.log(res);
    //     thermalMapuuid.value = res;
    //     getthermalMapdata();
    //   })
    //   .catch(() => {
    //     thermalflg.value = false;
    //   });
    algorithmcorrelationFactorWater({
      tagNameList: thermalMap.value.map(item => item.indicatorPath),
      startTime: dateRange.value[0],
      endTime: dateRange.value[1],
      centerParam: firstCode.value
    })
      .then(res => {
        console.log(res);
        thermalMapuuid.value = res;
        getthermalMapdata();
      })
      .catch(() => {
        thermalflg.value = false;
      });
  }
};
//获取热力图
const getthermalMapdata = () => {
  algorithmcacheRedisWater({
    uuid: thermalMapuuid.value,
    centerParam: firstCode.value
  })
    .then(res => {
      console.log(res);
      if (res == null) {
        setTimeout(() => {
          getthermalMapdata();
        }, 5000);
      } else {
        thermalMapData.value = res;
        setTimeout(() => {
          initChart();
        }, 100);
        thermalflg.value = false;
      }
      // else{
      //    thermalMapData.value = {
      //   xaxis: [],
      //   yaxis: [],
      //   xyData: []
      // };
      // PxMessage({
      //   message: `暂无数据`,
      //   type: "error"
      // });
      // }
    })
    .catch(() => {
      thermalflg.value = false;
      thermalMapData.value = {
        xaxis: [],
        yaxis: [],
        xyData: []
      };
      PxMessage({
        message: `暂无数据`,
        type: "error"
      });
    });
};
// 数据分析
const firstchange = val => {
  getthermalMapuuid();
};
const threechange = val => {
  algorithmSpecialScatterPlot({
    center: val,
    indicators: thermalMap.value.map(item => item.indicatorPath),
    startTime: dateRange.value[0],
    endTime: dateRange.value[1]
  }).then(res => {
    console.log(res);
    ScatterPlotList.value = res;
  });
};
const firstCode = ref("");
const threeCode = ref("");
const forecastPath = ref("");
const ScatterPlotList = ref([]);
const dataConfig = data => {
  centerIndicator2.value = data.indicatorPath;
  firstCode.value = data.indicatorPath;
  threeCode.value = data.indicatorPath;
  forecastPath.value = data.indicatorPath;
  console.log(data);
  queryalgorithmMatrixByPathAndSystemCode({
    id: data.centerId
  }).then(res => {
    console.log(res);
    relateMetric.value = res.nodeDtos.filter(item => item.category === 1);
    influenceMetric.value = res.nodeDtos.filter(item => item.category === 2);
    thermalMap.value = res.nodeDtos;
    algorithmSpecialScatterPlot({
      center: threeCode.value,
      indicators: thermalMap.value.map(item => item.indicatorPath),
      startTime: dateRange.value[0],
      endTime: dateRange.value[1]
    }).then(res => {
      console.log(res);
      ScatterPlotList.value = res;
      getthermalMapuuid();
    });
  });
  isDataAnalysis.value = true;
  setTimeout(() => {
    initChart();
  });

  window.addEventListener("resize", handelResize);
};

// 初始化热力图
const initChart = () => {
  var chartDom = document.getElementById("hotChartContainer");
  chartInstance = echarts.init(chartDom);
  chartInstance.clear();
  chartInstance.setOption({
    tooltip: {
      position: "top"
    },
    grid: {
      top: "3%",
      containLabel: true
    },
    yAxis: {
      type: "category",
      data: thermalMapData.value.xaxis
    },
    xAxis: {
      type: "value"
    },
    series: [
      {
        data: thermalMapData.value.yaxis,
        type: "bar"
      }
    ]
  });
};

// 数据分析返回
const emit = defineEmits(["closeDig"]);
const cancel = () => {
  isDataAnalysis.value = false;
  emit("closeDig", false);
};

// 关系配置返回

const search = () => {};

const reset = () => {
  const end = new Date();
  end.setHours(23, 59, 59, 0);
  end.setTime(end.getTime());
  const start = new Date();
  start.setHours(0, 0, 0, 0);
  start.setTime(start.getTime());
  dateRange.value = [formatDate(start), formatDate(end)];
};

/** 分析 */
const showSpc = () => {};
const actYAxis = ref([]);
const aiYAxis = ref([]);
const analysisHandler = () => {
  // spcquerySpcAnalysis({
  //   pointList: [...selectedList.value, ...checkedMetric.value, ...checkedImpactMetric.value, centerIndicator2.value],
  //   timePeriod: "hours",
  //   startTime: dateRange.value[0],
  //   endTime: dateRange.value[1]
  // }).then(response => {
  //   SpcAnalysis.value = response;
  //   if (forecast.value) {
  //     algorithmqueryWaterFuture({
  //       paramList: [forecastPath.value],
  //       timePeriod: "hour",
  //       startTime: dateRange.value[0],
  //       endTime: dateRange.value[1]
  //     }).then(response => {
  //       console.log(response);
  //       WaterFuture.value = response;
  //       if (response != null) {
  //         series.value.push({
  //           data: WaterFuture.value.map(item => item.value),
  //           type: "line",
  //           name: "预测值",
  //           yAxisIndex: 0
  //         });
  //         setdata();
  //       }
  //     });
  //   }
  // });
  algorithmqueryWaterFutureNew({
    paramList: [...selectedList.value, ...checkedMetric.value, ...checkedImpactMetric.value, centerIndicator2.value],
    timePeriod: "hour",
    startTime: dateRange.value[0],
    endTime: dateRange.value[1],
    spcStatus: forecast.value
  }).then(response => {
    console.log(response);
    SpcAnalysis.value = response.spcList;
    xaxis.value = response.xaxis;
    actYAxis.value = response.actYAxis;
    aiYAxis.value = response.aiYAxis;
  });
};

const setdata = () => {
  option.value = {
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          title: "点击保存为图片"
        }
      }
    },
    grid: {
      left: "5%",
      top: "60px",
      right: yAxis.value.length > 1 ? `${yAxis.value.length * 5}%` : "80px",
      bottom: "10px",
      containLabel: true
    },
    legend: {
      type: "scroll",
      width: "50%"
    },
    tooltip: {
      trigger: "axis",
      confine: true
    },
    xAxis: {
      type: "category",
      boundarGap: false,
      axisLabel: {
        align: "left"
      },
      data: xaxis.value
    },
    yAxis: yAxis.value,
    series: series.value
  };
};

const valueIsEmpty = value => {
  if (value === "" || value == null || typeof value == "undefined") {
    return true;
  }
  return false;
};

// 指标数据转成tree-select数据的格式
const convertData = node => {
  node.value = node.measureCode;
  node.label = node.measureName;
  if (node.children) {
    node.children.forEach(child => {
      convertData(child);
    });
  }
};
watch(
  () => props.centerIndicator,
  newOptions => {
    dataConfig(props.centerIndicator);
    setTimeout(() => {
      initChart();
      // queryMatrix();
      analysisHandler();
    }, 1000);
  }
);
</script>

<style scoped lang="scss">
.dataAnalysis {
  position: absolute;
  top: 0;
  top: 5px;
  left: 0;
  width: 100%;
  height: calc(100% + 10px);
  background: #f0f2f5;
}

.content {
  padding: 0;
}

.searchBox {
  display: flex;
  width: 100%;
  padding: 10px 20px;
  margin-bottom: 12px;
  background: white;
}

.contentBox {
  height: calc(100% - 32px);
}

.contentBoxrow {
  padding: 10px 20px;
  margin-bottom: 16px;
  background: white;
}

.hotEcharts {
  float: left;
  width: 100%;
  min-width: 630px;
}

.metricEcharts {
  float: left;
  width: 100%;
  min-width: 100%;
}

.metricSelect {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 12px;
  margin-bottom: 12px;
}

.metricContent {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: calc(100% - 100px);
}

.metricContentBox {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: calc(100% - 200px);
  margin-bottom: 12px;
}

.metricChart {
  width: 83%;
  height: 400px;
}

.metricCheck {
  width: 15%;
}

.checkbox {
  height: 150px;
  overflow: hidden scroll;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background-color: #fff;
}

::-webkit-scrollbar-thumb {
  width: 4px;
  height: 4px;
  background: #dedede;
  border-radius: 2px;
}

.equip-wrap-common {
  height: calc(100vh - 180px);
  padding: 0;

  .equip-form {
    margin-bottom: 8px;

    :deep(.px-form-item) {
      width: 20%;
      margin-bottom: 8px;
    }

    :deep(.px-button) {
      margin-top: -8px;
    }
  }
}

.item-block {
  padding-top: 10px;
  margin-bottom: 12px;
  border: 1px dashed #dcdcdc;
}

.equip-table-btn {
  display: flex;
  justify-content: space-between;
}

.relateConfigBtn {
  position: absolute;
  right: 0;
  bottom: 0;
}

:deep(.px-checkbox) {
  .px-checkbox__label {
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
